import React, { useEffect, useState } from 'react'
import { getCityApi } from '../../api'
import { IndexBar, NavBar, SearchBar, Space, Tag } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
const City = () => {
    const nav = useNavigate()
    const [data, setData] = useState({})
    const getData = async () => {
        const resp = await getCityApi()
        console.log(resp.data.data);
        setData(resp.data.data)
    }

    useEffect(() => {
        getData()
    }, [])

    const getCity=(city)=>{
        nav(-1)
        localStorage.setItem("city",city)
    }
    return (
        <div style={{ height: "100vh" }}>
            <NavBar onBack={() => nav(-1)}>
             <SearchBar placeholder='请输入内容' />
            </NavBar>
            <h2 style={{ height: "30px" }}>热门城市</h2>
            <Space style={{ flexWrap: 'wrap' }}>
                {
                    data.hotCities && data.hotCities.map((v, i) => {
                        return <Tag key={i} onClick={() => getCity(v.name)}>
                            {v.name}
                        </Tag>
                    })
                }
            </Space>
            <div style={{ height: window.innerHeight }}>
              <IndexBar>
                {data.cityList && data.cityList.map((v, i) => {
                    return (
                        <IndexBar.Panel
                            index={v.title}
                            title={v.title}
                            key={v.title}
                            
                        >
                            {
                                v.items.map((v, i) => {
                                    return <h3 key={i} onClick={() => getCity(v.name)}>
                                        {v.name}
                                    </h3>
                                })
                            }

                        </IndexBar.Panel>
                    )
                })}
            </IndexBar>
            </div>
            
        </div>
    )
}

export default City
